<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search, Service } from '@element-plus/icons-vue'
import { reactive } from 'vue'
// 分页相关
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const size = ref('default')
const disabled = ref(false)
const background = ref(false)

// 分页处理
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}

const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

//弹出窗口相关
const open = ref(false)
const open1 = ref(false)
const edittitle = ref('修改客户信息')
const activeName1 = ref('1')

// 修复：添加表单引用
const infoRef = ref(null)
const editForm = ref({
    character1: [],
    character2: [],
    status: [],
    contract: [],
    rank: '',
    telephone: '',
    customlabel1: '',
    customlabel2: '',
    department: '',
    industrytype: '',
    region: '',
    taxtype: [],
    datetime: '',
    resource: '',
    month: '',
    customtype: [],
    location: [],
    saleplatform: '',
})
const handleOpen = (row) => {
    editForm.value = { ...row }
    open.value = true
}
const handleAdd = () => { 
    open.value = true
    edittitle.value = '添加客户信息'
}
const handleAdd1 = () => { 
    open1.value = true
    edittitle.value = '企业码新增客户'
}
const handleClose = () => {
    open.value = false
    // 重置编辑表单
    editForm.value = {
        character1: [],
        character2: [],
        status: [],
        contract: [],
        rank: '',
        telephone: '',
        customlabel1: '',
        customlabel2: '',
        department: '',
        industrytype: '',
        region: '',
        taxtype: [],
        datetime: '',
        resource: '',
        month: '',
        customtype: [],
        location: [],
        saleplatform: '',
    }
}

//。。。。。。。

const props = {
    multiple: true,
}
const customlabel = [
    {
        value: '行业标签',
        label: '行业标签',
        children: [
            {
                value: '客户标签1',
                label: '客户标签1'
            },
            {
                value: '客户标签2',
                label: '客户标签2'
            },
        ]
    },
    {   
        value: '财务难度',
        label: '财务难度',
        children: [
            {
                value: '客户标签1',
                label: '客户标签1'
            },
            {
                value: '客户标签2',
                label: '客户标签2'
            },
        ]   

    },
    {
        value: '企业性质',
        label: '企业性质',
    },
    {
        value: '社保情况',
        label: '社保情况',
    },
    {
        value: '企业规模',
        label: '企业规模',
    },
    {
        value: '开票模式',
        label: '开票模式',
    },
    {
        value: '成本费用',
        label: '成本费用',
    },
    {
        value: '跨境电商',
        label: '跨境电商',
    },
    {
        value: '国内电商',
        label: '国内电商',
    },
    {
        value: '工商年报',
        label: '工商年报',
    },
    {
        value: '银行',
        label: '银行',
        
    },
    {
        value: '企业所得税提醒',
        label: '企业所得税提醒',
        
    },
    {
        value: '工资申报',
        label: '工资申报',
        
    },
    {
        value: '老板价格态度',
        label: '老板价格态度',
        
    },
    {
        value: '税控盘',
        label: '税控盘',
        
    },
    {
        value: '公积金',
        label: '公积金',
        
    },
]
const options = [
    {
        value: '张蕾',
        label: '张蕾',    
    },
    {
        value: '李飞飞',
        label: '李飞飞',
    },
    {
        value: '二毛',
        label: '二毛',
    },
    {
        value: '小熊',
        label: '小熊',
    },
]
const locations = [
    {
        value: '江西省',
        label: '江西省',
        children: [
            {
                value: '南昌市',
                label: '南昌市',
                children: [
                    {
                        value: '青山湖区',
                        label: '青山湖区',
                    },
                    {
                        value: '西湖区',
                        label: '西湖区',
                    },
                ]
            },
            {
                value: '九江市',
                label: '九江市',
                children: [
                    {
                        value: '浔阳区',
                        label: '浔阳区',
                    },
                    {
                        value: '濂溪区',
                        label: '濂溪区',
                    },
                ]
            },
        ]
    },
    {
        value: '广东省',
        label: '广东省',
        children: [
            {
                value: '广州市',
                label: '广州市',
                children: [
                    {
                        value: '越秀区',
                        label: '越秀区',
                    },
                    {
                        value: '海珠区',
                        label: '海珠区',
                    },
                ]
            }]
        }
    ]
            
const indstrys = [
    {
        value: '互联网',
        label: '互联网',
    },
    {
        value: '金融',
        label: '金融',
    },
    {
        value: '教育',
        label: '教育',
    },
    {
        value: '医疗',
        label: '医疗',
    },  
]
const sieveform = reactive({
    character1: [],
    character2: [],
    status: [],
    contract: [],
    rank: '',
    telephone: '',
    customlabel1: '',
    customlabel2: '',
    department: '',
    industrytype: '',
    region: '',
    taxtype: [],
    datetime: '',
    resource: '',
    month: '',
    customtype: [],
    location: [],
    saleplatform: '',
    })
const columns = [
    {
        title: '客户简称',
        key: 'name',
        sortable: true,
        
    },
    {
        title: '客户编号',
        key: 'number',
        sortable: true,
    },
    {
        title: '客户类型',
        key: 'type',
        filterable: true
    },
    {
        title: '客户经理',
        key: 'manager'
    },
        {
        title: '服务顾问',
        key: 'adviser'
    },
        {
        title: '代账服务状态',
        key: 'state'
    },
        {
        title: '客户等级',
        key: 'rank',
        sortable: true,
    },
        {
        title: '所属片区',
        key: 'region',
        sortable: true,
    },
        {
        title: '增值税',
        key: 'tax'
    },
    {
        title: '成立时间',
        key: 'datetime',
        sortable: true,
    },
];
const mockData = ref([]);
const loading = ref(true)

const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event);

    loading.value = true
    setTimeout(() => {
        if(activeName.value === 'first') {
            mockData.value = []
            loading.value = false
            return;
        }
        mockData.value = [
            {
                name: '张三',
                number: 252436346324,
                type: '非带张客户',
                manager: '13812345678',
                adviser: '13812345678',
                state: '已代账',
                rank: 'A',
                region: '北京市朝阳区',
                tax: '13812345678',
                datetime: '2025-06-12'
            },
            {
                name: '张三',
                number: 252436346324,
                type: '非带张客户',
                manager: '13812345678',
                adviser: '13812345678',
                state: '已代账',
                rank: 'A',
                region: '北京市朝阳区',
                tax: '13812345678',
                datetime: '2025-06-12'
            },
            {
                name: '张三',
                number: 252436346324,
                type: '非带张客户',
                manager: '13812345678',
                adviser: '13812345678',
                state: '已代账',
                rank: 'A',
                region: '北京市朝阳区',
                tax: '13812345678',
                datetime: '2025-06-12'
            }
        ]
        loading.value = false
    }, 2000)
}
onMounted(() => {
    setTimeout(() => {
        mockData.value = [
            {
                name: '张三',
                number: 252436346324,
                type: '非带张客户',
                manager: '13812345678',
                adviser: '13812345678',
                state: '已代账',
                rank: 'A',
                region: '北京市朝阳区',
                tax: '13812345678',
                datetime: '2025-06-12'
            },
            {
                name: '张三',
                number: 252436346324,
                type: '非带张客户',
                manager: '13812345678',
                adviser: '13812345678',
                state: '已代账',
                rank: 'A',
                region: '北京市朝阳区',
                tax: '13812345678',
                datetime: '2025-06-12'
            },
            {
                name: '张三',
                number: 252436346324,
                type: '非带张客户',
                manager: '13812345678',
                adviser: '13812345678',
                state: '已代账',
                rank: 'A',
                region: '北京市朝阳区',
                tax: '13812345678',
                datetime: '2025-06-12'
            }
        ]
        loading.value = false
    }, 2000)
})    
</script>
<template>
    <div class="client-info">
        <div class="top-filter">
            <div class="top-filter-left">
                <stick-popup>
                    <template #show>
                        <div class="top-filter-btn">
                            <div class="top-filter-btn-label">
                                筛选
                            </div>
                            <div class="top-filter-btn-icon">
                                <Operation />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <!-- 筛选表单 -->
                        <div class="top-filter-form">
                            <el-form :model="sieveform" label-width="auto" style="max-width: 600px">
                                <!-- 联级选择器 -->                    
                                <el-form-item label="服务角色："> 
                                    <div class="custom-label">
                                        <el-select v-model="sieveform.character1" style="width: 130px">
                                            <el-option label="服务顾问" value="服务顾问" />
                                            <el-option label="其他服务人员" value="其他服务人员" />
                                            <el-option label="税务会计" value="税务会计" />
                                            <el-option label="审核会计" value="审核会计" />
                                            <el-option label="财务会计" value="财务会计" />
                                            <el-option label="收费负责人" value="收费负责人" />
                                            <el-option label="客户经理" value="客户经理" />
                                            <el-option label="开票员" value="开票员" />
                                        </el-select>
                                        <el-select v-model="sieveform.character2" style="width: 150px">
                                            <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </div>
                                </el-form-item>       
                                <el-form-item label="代账服务状态：">
                                    <el-checkbox-group v-model="sieveform.status">
                                        <el-checkbox value="服务中" name="type">
                                            服务中
                                        </el-checkbox>
                                        <el-checkbox value="暂停服务" name="type">
                                            暂停服务 
                                        </el-checkbox>
                                        <el-checkbox value="已流失" name="type">
                                            已流失 
                                        </el-checkbox>
                                        <el-checkbox value="未建账" name="type">
                                            未建账  
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="合同：">
                                    <el-checkbox-group v-model="sieveform.contract">
                                        <el-checkbox value="合同服务中" name="type">
                                            合同服务中
                                        </el-checkbox>
                                        <el-checkbox value="合同已结束" name="type">
                                            合同已结束 
                                        </el-checkbox>
                                        <el-checkbox value="无合同" name="type">
                                            无合同 
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                                <el-form-item label="客户等级：">
                                    <el-select v-model="sieveform.rank" placeholder="搜索客户等级">
                                        <el-option label="一般客户" value="一般客户" />
                                        <el-option label="重要客户" value="重要客户" />
                                        <el-option label="VIP客户" value="VIP客户" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="联系人">
                                    <el-input v-model="sieveform.telephone" placeholder="搜索联系人"/>
                                </el-form-item>
                                <el-form-item label="客户标签：">
                                    <div class="custom-label">
                                        <el-select v-model="sieveform.customlabel1" style="width: 100px">
                                            <el-option label="包含" value="包含" />
                                            <el-option label="不包含" value="不包含" />
                                            <el-option label="任一" value="任一" />
                                        </el-select>
                                        <el-tree-select
                                            v-model="sieveform.customlabel2"
                                            :data="customlabel"
                                            multiple
                                            :render-after-expand="false"
                                            show-checkbox
                                            style="width: 190px"
                                            placeholder="搜索客户标签" 
                                        />
                                    </div>                                   
                                </el-form-item>
                                <el-form-item label="所属部门：">
                                    <div class="custom-label">
                                        <el-select v-model="sieveform.department" placeholder="搜索所属部门" style="width: 160px">
                                            <el-option label="九江研发团队" value="九江研发团队" />
                                            <el-option label="百账汇" value="百账汇" />
                                            <el-option label="江西日月眼镜" value="江西日月眼镜" />
                                        </el-select>
                                        <div>
                                            <el-checkbox label="部门包括下级" size="default" border />
                                        </div>
                                    </div>                          
                                </el-form-item>
                                <el-form-item label="行业分类：">
                                    <el-select v-model="sieveform.industrytype" placeholder="搜索行业分类">
                                        <el-option 
                                             v-for="item in indstrys"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />                     
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="片区：">
                                    <el-select v-model="sieveform.region" placeholder="搜索片区">
                                        <el-option label="华南" value="华南" />
                                        <el-option label="华东" value="华东" />             
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="增值税类型：">
                                    <el-radio-group v-model="sieveform.taxtype">
                                        <el-radio value="全部" name="type">
                                            全部
                                        </el-radio>
                                        <el-radio value="一般纳税人" name="type">
                                            一般纳税人 
                                        </el-radio>
                                        <el-radio value="小规模纳税人" name="type">
                                            小规模纳税人 
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <!-- 时间控件 -->
                                <el-form-item label="新建时间：">
                                    <el-date-picker
                                        v-model="sieveform.datetime"
                                        type="daterange"
                                        range-separator="To"
                                        start-placeholder="请选择日期"
                                        end-placeholder="请选择日期"
                                        :size="size"
                                    />
                                </el-form-item>
                                <el-form-item label="来源：">
                                    <el-select v-model="sieveform.resourse" placeholder="请选择">
                                        <el-option label="邹辉龙" value="邹辉龙" />
                                        <el-option label="邓杰" value="邓杰" />             
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="公司成立月份：">
                                    <el-select v-model="sieveform.month" placeholder="搜索公司成立月份：">
                                        <el-option label="1" value="1" />
                                        <el-option label="2" value="2" /> 
                                        <el-option label="3" value="3" />
                                        <el-option label="4" value="4" /> 
                                        <el-option label="5" value="5" />
                                        <el-option label="6" value="6" />             
                                        <el-option label="7" value="7" />
                                        <el-option label="8" value="8" /> 
                                        <el-option label="9" value="9" />
                                        <el-option label="10" value="10" /> 
                                        <el-option label="11" value="11" />
                                        <el-option label="12" value="12" /> 
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="客户类型：">
                                    <el-radio-group v-model="sieveform.customtype">
                                        <el-radio value="全部" name="type">
                                            全部
                                        </el-radio>
                                        <el-radio value="代账客户（执行中）" name="type">
                                            代账客户（执行中） 
                                        </el-radio>
                                        <el-radio value="代账客户（合同结束或终止）" name="type">
                                            代账客户（合同结束或终止） 
                                        </el-radio>
                                        <el-radio value="非代账客户" name="type">
                                            非代账客户
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="所在地区：" >
                                    <el-cascader :options="locations" 
                                    clearable 
                                    v-model="sieveform.location"
                                    />              
                                </el-form-item>
                                
                                <el-form-item label= "营销平台：">
                                    <el-radio-group v-model="sieveform.saleplatform">
                                        <el-radio value="Sponsor">全部</el-radio>
                                        <el-radio value="Venue">慧营销</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="top-filter-operate">
                            <el-button type="primary">确定</el-button>
                            <el-button type="text">重置</el-button>
                        </div>
                    </template>
                </stick-popup>
                <div class="top-filter-search">
                     <el-input
                        v-model="input1"
                        placeholder="请输入内容进行搜索"
                        >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </div>
                <div class="top-filter-checkbox">
                    <el-checkbox v-model="checked1" label="包含流失" size="default" border />
                </div>
            </div>
            <div class="top-filter-right">
                <!-- 新增客户按钮 -->
                <el-dropdown 
                split-button 
                class="custom-dropdown"
                @click="handleAdd"
                type="primary"
                >
                    新增客户
                    <template #dropdown>
                        <el-dropdown-menu @click="handleAdd1">
                            <el-dropdown-item>企业码新增客户</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- 批量操作按钮 -->
                <el-dropdown split-button @click="">
                    批量操作
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>批量新增合同</el-dropdown-item>
                            <el-dropdown-item>批量创建项目</el-dropdown-item>
                            <el-dropdown-item>批量删除</el-dropdown-item>
                            <el-dropdown-item>批量编辑标签</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-dropdown split-button @click="">
                    导入
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>导出客户</el-dropdown-item>
                            <el-dropdown-item>导出记事本</el-dropdown-item>
                            <el-dropdown-item>导出待办</el-dropdown-item>
                            <el-dropdown-item>导入客户画像</el-dropdown-item>
                            <el-dropdown-item>导出客户画像</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="table-area">
            <div class="table-area-tab">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="全部客户" name="first"></el-tab-pane>
                    <el-tab-pane label="代理记账报税" name="second"></el-tab-pane>
                    <el-tab-pane label="其他财税服务" name="third"></el-tab-pane>
                    <el-tab-pane label="人资社保" name="fourth"></el-tab-pane>
                    <el-tab-pane label="工商服务" name="fifth"></el-tab-pane>
                    <el-tab-pane label="资质办理" name="sixth"></el-tab-pane>
                    <el-tab-pane label="知识产权" name="seventh"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="table-area-table">
                <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true" :show-operation="true">
                    <!-- <template #data-age="scope">
                        <span>{{ scope.data }}</span>
                    </template>
                    <template #filter-age>
                        <span>年龄213123123123123</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #filter-address>
                        <span>地址12恶趣味委屈委屈12312312312312</span>
                        <el-icon class="filter-icon"></el-icon>
                    </template>
                    <template #operation>
                        <span><button>删除</button></span>
                    </template> -->
                    <template #operation="scope">
                        <el-button type="text" @click="handleOpen(scope.row)">修改</el-button>
                        <el-button type="text" style="color: #f56c6c;">删除</el-button>
                    </template>
                </my-table>
            </div>
            <div class="table-pagination">
                <el-pagination
                    v-model:current-page="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="mockData.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    >
                </el-pagination>
            </div>
        </div>
        <!-- 修改线索信息对话框 - 使用 editForm -->
        <el-dialog :title="edittitle" v-model="open" width="830px" append-to-body>
            <el-tabs class="" @tab-click="handleClick" v-model="activeName1">
                <el-tab-pane label="客户信息" name="1">
                    <el-space
                        fill
                        wrap
                        :fill-ratio="fillRatio"
                        :direction="direction"
                        style="width: 100%"
                        >
                        <div class="card-header1">            
                            <el-icon color="rgb(238, 190, 119)" :size="20"><Briefcase /></el-icon>
                            <span class="card-customname">
                                九江石化
                            </span>
                            <el-button type="warning">重要客户</el-button>
                            <el-button type="warning">小</el-button>
                        </div>
                        
                <el-descriptions border column="2">
                    <el-descriptions-item label="客户简称" span="3"> 
                    <el-input>

                    </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="客户类型">
                        <el-input
                        :placeholder="edittitle"
                        :value="editForm.username"
                        @input="handleInput"
                        >
                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="代账服务状态">
                        <el-input>

                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="片区">
                        <el-input>

                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="客户等级">
                        <el-input>

                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="来源">
                        <el-input>

                        </el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="客户标签" span="2">
                        <el-input>

                        </el-input>
                    </el-descriptions-item>
                </el-descriptions>
            <el-descriptions
                title="企业信息"
                border
                style="margin-top: 20px"
                column="2"
            >
                <el-descriptions-item label="客户全称">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="所属部门">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="企业税号">
                    <el-input>

                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="客户编号">
                    <el-input>

                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="增值税">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="行业分类">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="所在地区" span="2">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="详细地址" span="2">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
                title="服务人员"
                border
                style="margin-top: 20px"
                column="2"
            >
                <el-descriptions-item label="客户经理">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="服务顾问">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="账务会计">
                    <el-input>

                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="税务会计">
                    <el-input>

                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="收费开票人" span="2">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="开票员" span="2">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="审计会计" span="2">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="其他服务人员" span="2">
                    <el-input>
                        
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>      
                    </el-space>
                </el-tab-pane>
                <el-tab-pane label="联系人" name="2">联系人</el-tab-pane>
                <el-tab-pane label="合同" name="3">合同</el-tab-pane>
                <el-tab-pane label="订单" name="4">订单</el-tab-pane>
                <el-tab-pane label="云盘" name="5">云盘</el-tab-pane>
                <el-tab-pane label="企业信息" name="6">企业信息</el-tab-pane>
                <el-tab-pane label="客户画像" name="7">客户画像</el-tab-pane>
            </el-tabs>
        </el-dialog>
        <el-dialog v-model="open1" width="500px" append-to-body title="企业码新增客户">
            <el-main>
                <el-form-item label="输入企业码">
                    <el-input></el-input>
                </el-form-item>
                <el-text>
                    生成的企业码有效时间48小时，过期失效，需重新获取
                </el-text>
                <br>
                <br>
                <div class="custom-label">
                    <el-text size="large" type="warning">
                        说明 
                    </el-text>
                    <div class="custom-label-text">
                        <el-text size="small">
                            企业码仅用于不同产品间绑定客户关系，如将“小亿云财税”或“代账宝”中的客户导入至亿企代账平台。导入的客户，其服务顾问、账务会计、税务会计、收费负责人默认为操作者本人，若要调整需要在【工作分配】中指派
                        </el-text>
                    </div>
                </div>
            </el-main>
            
            <el-button class="footer-button" style="margin-left: 186px; margin-top: 30px;">
                下一步
            </el-button>
             
                                       
        </el-dialog>
    </div>
</template>
<style lang="less" scoped>
.custom-label {
        display: flex;
        align-items: center;
        .custom-label-text {
            max-width: 330px;
            margin-left: 50px;
        }   
    }

.client-info {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    overflow: auto;
}
.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}
.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;
        .top-filter-btn-icon {
            width: 20px;
            height: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .top-filter-search {
        width: 200px;
    }
}
.top-filter-right {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;      
} 
.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    .table-area-tab {
        width: 100%;
        box-sizing: border-box;    
    }
    .table-area-table {
        width: 100%;
        box-sizing: border-box;

    }
    .table-pagination{
        width: 100%;
        margin: 20px 0 0 0;
        display: flex;
        justify-content: center;
        padding-bottom: 20px;
    }
}

.top-filter-form, .top-filter-operate {
    width: 400px;
    background-color: #fff;
    .custom-label {
        display: flex;
        align-items: center;
    }
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.card-header1 {
    display: flex;
    align-items: center;
    margin: 3px 0 16px 0;
    .card-customname {
        font-size: 25px; 
        font-weight: 600;
        margin: 0 10px
    }
}
</style>
